<template>
  <div class="app-container">
    <OperationTable
      :loading="loading"
      :queryParams="queryParams"
      :tableSwitch="glassList"
      :total="total"
      @getList="getList"
      @resetQuery="resetQuery"
      @handleQuery="handleQuery"
    >
      <template v-slot="slot">
        <lineSet :drawer="slot.settingShow" />
      </template>
    </OperationTable>
    <div class="list">
      <div class="boxList">
        <div
          class="box"
          v-for="(item, index) in placeSection"
          :key="index"
          :style="{ backgroundColor: item.bgColor }"
          @click="handlerSection(item.data, index)"
          :class="check == index ? 'borderLine' : ''"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
    <div class="typeList">
      <div>核算统计：</div>
      <div class="boxShow">
        <div class="item" v-for="(item,index) in Object.keys(typeMap)" :key="index">
          <div class="label">{{ item }}:{{ typeMap[item] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listGlass2 } from "@/api/assembly/glass";
import OperationTable from "./components/table.vue";
import lineSet from "./components/lineSet.vue";
import { placeSection } from "./config/index";
import { getSectionGlass } from "@/api/assembly/glass";
import { mapState } from "vuex";
export default {
  name: "Operation",
  components: {
    OperationTable,
    lineSet,
  },
  data() {
    return {
      // 玻璃表格数据
      glassList: null,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        place: undefined,
        status: "0",
        state: undefined,
      },
      total: 0,
      placeSection,
      check: null,
      isLoading: true,
      loading: true,
    };
  },
  created() {
    this.getList();
    this.$store.dispatch("listGlass").then(() => {
      this.isLoading = false;
    });
  },
  methods: {
    getList() {
      this.loading = true;
      if (this.queryParams.optCodeContext) {
        let arr = this.queryParams.optCodeContext.replace("，", ",").split(",");
        this.queryParams.barcode = arr[0];
        this.queryParams.disturbCode = arr[1];
      } else {
        this.queryParams.barcode = "";
        this.queryParams.disturbCode = "";
      }

      listGlass2(this.queryParams).then((res) => {
        this.glassList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.getList();
      this.check = null;
    },
    resetQuery() {
      this.check = null;
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        place: undefined,
        status: "0",
        state: undefined,
      };
      this.getList();
    },
    handlerSection(data, index) {
      this.loading = true;
      this.check = index;
      getSectionGlass({ place: data }).then((res) => {
        this.loading = false;
        this.glassList = res.data;
        this.total = 0;
      });
    },
  },
  computed: {
    ...mapState({
      totalGlass: (state) => {
        return state.Glass.glass;
      },
    }),
    typeMap() {
      let arr = {};
      this.totalGlass.forEach((item) => {
        if (!arr.hasOwnProperty(item.type)) {
          arr[item.type] = 1;
        } else {
          arr[item.type] += 1;
        }
      });
      return arr;
    },
  },
};
</script>
<style lang="less" scoped>
.app-container {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}

::v-deep .cell {
  font-size: 18px;
}

.list {
  flex: 1;
  display: flex;
  padding: 0px 0 0 0;
  border-top: 1px solid #e6e6e6;

  .boxList {
    padding: 10px 0 0 0;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    // max-height: 120px;
    .box {
      margin: 0 5px 5px 0;
      min-width: 178px;
      width: 12.2%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      font-weight: bold;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 5%);
      background-color: #fafafa;
      cursor: pointer;
    }
  }

  .borderLine {
    border: 2px solid red;
  }
}
.typeList {
  width: 100%;
  border-right: 1px solid #e6e6e6;
  padding: 0px 10px 0px 0;
  display: flex;
  .title {
    height: 20px;
    margin-bottom: 5px;
  }
  .boxShow {
    display: flex;
  }
  .item {
    display: flex;
    margin-right: 15px;
    font-size: 17px;
    .label {
      flex-wrap: nowrap;
    }
  }
}
</style>
